<template>
    <div class="content-box">
        <div class="container">
            <p class="title">充值</p>
            <div style="margin: 20px;"></div>
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" ref="login">
                <el-form-item label="请输入充值金额：" label-width="130px">
                    <el-input v-model="formLabelAlign.money"></el-input>
                </el-form-item>

                <el-form-item class="btns">
                    <el-button type="primary" @click="submitForm()">确认充值</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            labelPosition: 'right',
            formLabelAlign: {
                money: ''
            }
        };
    },
    methods: {
        money() {
            return localStorage.getItem('ms_money') || '';
        },
        submitForm() {
            this.$refs.login.validate(valid => {
                if (valid) {
                    this.$message.success('充值成功');
                    let data2 = this.money()-0;
                    var data3 = this.formLabelAlign.money - 0;
                    var data4 = data2 + data3;
                    var data5 = data4.toString();
                    console.log(data2, data3, data4, data5);
                    localStorage.setItem('ms_money', data5);
                } else {
                    this.$message.error('充值失败');
                    console.log('error submit!!');
                    return false;
                }
            });
        }
    }
};
</script>

<style>
.title {
    font-size: larger;
    margin-bottom: 30px;
}
.user {
    height: 100%;
    width: auto;
}
.btns {
    display: flex;
    justify-content: flex-end;
}
</style>
